<template>
	<view :class="currentTheme">
		<index-header :title="item.name" :offsetTop="offsetTop" :bgImg="item.image" isBack :height="contentHeight">
			<view slot="content" class="u-flex-1 u-position-relative header-container">
				<view class="u-position-relative header-content" id="slot-content">
					<a-nabbar :isFixed="false" navBg="transparent" txtColor="white" />
					<view class="u-flex u-padding-left-32 u-padding-right-32 u-col-top ">
						<item-image :img="item.image" width="175" height="240"></item-image>
						<view class="u-flex-1 u-margin-left-24">
							<view class="text-white u-font-36 text-bold u-line-2 cur-name">{{item.name || ''}}</view>
							<view class="tag u-flex u-flex-wrap">
								<view class="u-margin-right-10 u-margin-bottom-6"
									v-for="(c,i) in item.categoryDescription" :key="i">
									<u-tag :text="c" size="mini" shape="circle" bg-color="#765CFE"
										border-color="#765CFE" color="white" />
								</view>
							</view>
							<view class="u-flex">
								<flex-text txt="开放上车时间" size="24" width="145" customClass="text-white"></flex-text>
								<text class="u-font-24 text-white">：{{item.enrollTime | timeFormat}}</text>
							</view>
							<view class="u-flex">
								<flex-text txt="发车时间" size="24" width="145" customClass="text-white"></flex-text>
								<text class="u-font-24 text-white">：{{item.estimateTime | timeFormat}}</text>
							</view>
							<view class="u-flex">
								<flex-text txt="展会酒店地址" size="24" width="145" customClass="text-white"></flex-text>
								<text class="u-font-24 text-white u-line-1 u-flex-1" style="width: 0;">：{{item.hotelAddress||''}}{{item.hotelRoomNo||''}}</text>
							</view>
							<view class="u-flex u-margin-top-10">
								<item-image type="1" :img="item.avatar" :size="42" :fade="false" />
								<text
									class="u-font-28 u-margin-left-10 u-line-1 username-text">{{item.createName || '' }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="header-box-border u-position-absolute"></view>
		</index-header>
		<view class="u-padding-left-32 u-padding-right-32">
			<view class="box-title u-font-32 text-bold u-margin-bottom-26">发行</view>
			<item-box padding="0">
				<view class="u-padding-left-32 u-padding-right-32 u-padding-top-20 u-padding-bottom-20 u-flex">
					<item-image type="1" :img="item.avatar" size="96"></item-image>
					<view class="u-margin-left-26 u-font-30 content-desc-item u-flex-1 u-line-2">{{item.createName}}
					</view>
				</view>
			</item-box>
			<view class="box-title u-font-32 text-bold u-margin-bottom-26 u-margin-top-24">店家</view>
			<item-box padding="0">
				<view class="u-flex person-count-container u-border-bottom u-padding-left-32 u-padding-right-32">
					<u-icon name="renwu-ren" custom-prefix="index-custom-icon" size="31" color="#1a1a1a"></u-icon>
					<text class="u-font-24 u-margin-left-12">人数：</text>
					<view class="u-flex u-row-between u-flex-1">
						<view>
							<text class="u-font-40 text-color-txtTheme">{{participate}}</text>
							<text class="u-font-32">/{{item.people||0}}</text>
							<text class="u-font-24">人</text>
						</view>
						<view class="u-flex">
							<u-icon name="nan" custom-prefix="custom-icon" size="26" color="#765CFE"></u-icon>
							<text class="u-font-36 u-margin-left-10 text-color-txtTheme">{{manLen}}</text>
							<text class="u-font-30">/{{item.mpeople||0}}</text>
						</view>
						<view>
							<u-icon name="nv" custom-prefix="custom-icon" size="26"
								:color="currentThemeObj.themeSecondColor"></u-icon>
							<text class="u-font-36 u-margin-left-10 woman-class">{{womanLen}}</text>
							<text class="u-font-30">/{{item.people - item.mpeople||0}}</text>
						</view>
						<view>
							<item-btn v-if="item.isCrossTalk" width="143" height="42" bgColor="#F3EFFE">
								<text class="u-font-20 text-color-txtTheme">可反串</text>
							</item-btn>
						</view>
					</view>
				</view>
				<u-row>
					<u-col span="3" v-for="(item,index) in item.userSmallDtos" :key="index"
						@click="getAvatarDetail(item)">
						<view class="avatar u-flex u-row-center u-position-relative">
							<view v-if="item.userType==='lock'">
								<u-icon :name="item.gender==='男' ? 'nan' : 'nv'" custom-prefix="custom-icon"
									size="46" color="#fafafa"></u-icon>
								<view class="u-position-absolute right-avatar"
									:style="{backgroundColor:item.gender==='男' ? currentThemeObj.primary:currentThemeObj.themeSecondColor}">
									<u-icon name="suo"  color="white" custom-prefix="index-custom-icon"
										size="10"></u-icon>
								</view>
							</view>
							<item-image showSex :type="1" :img="item.avatar" :size="124" :sex-bg-color="item.gender==='男' ? currentThemeObj.primary:currentThemeObj.themeSecondColor"
								:sexIcon="item.gender==='男' ? 'man' : 'woman'" :fade="false" v-else />
						</view>
					</u-col>
					<u-col :span="3"  v-for="(item,index) in manEmptyLen" :key="$u.guid()">
						<view class="avatar u-flex u-row-center"  @click="lockCarPeople('男')">
							<u-icon name="nan" custom-prefix="custom-icon" size="46" color="#fafafa"></u-icon>
						</view>
					</u-col>
					<u-col :span="3"  v-for="(item,index) in womanEmptyLen" :key="$u.guid(10)">
						<view class="avatar u-flex u-row-center" @click="lockCarPeople('女')">
							<u-icon name="nv" custom-prefix="custom-icon" size="46" color="#fafafa"></u-icon>
						</view>
					</u-col>
				</u-row>
				<view class="u-font-22 text-color-txtTheme u-text-center u-margin-bottom-20" v-if="item.userSmallDtos&&item.userSmallDtos.length">
					点击头像可查看店家信息
				</view>
				<view class="u-padding-top-20 u-text-center" v-if="item.status==0">点击可锁定车位</view>
				<view class="u-padding-top-40 u-padding-bottom-40 u-padding-left-32 u-padding-right-32 u-flex u-row-between"  v-if="item.status==0">
					<view class="u-flex-1">
						<item-btn width="100%" height="88" type="plain" @click="lockCar">{{item.isLocked?'解锁车门':'车门焊死'}}</item-btn>
					</view>
					<view v-if="isFull" style="width: 20rpx;"></view>
					<view v-if="isFull" class="u-flex-1">
						<item-btn width="100%" height="88" @click="shareStore(item)">邀请店家</item-btn>
					</view>
				</view>
			</item-box>
			<view v-if="item.status==0" class="u-padding-top-45 u-padding-bottom-45 ">
				<view class="text-color-txtTheme u-font-22 u-margin-bottom-45 u-text-center">到达发车时间后，人齐点按发车</view>
				<item-btn width="100%" height="88" @click="startCar" :disabled="isFull" :bgColor="isFull ? '#999999' : currentThemeObj.primary">
					发车
				</item-btn>
				<view  v-if="item.status==0" class="u-margin-top-24">
					<item-btn width="100%" height="88" type="plain" :loading="outCarLoading" @click="closeCar('cancelCar',item)">
						取消发车
					</item-btn>
				</view>
			</view>
			<view class="u-text-center u-font-32 u-padding-46" v-if="item.status==2">
				<text class="box-title">测本用时：</text><text class="text-color-txtTheme">{{totalTime}}</text>
			</view>
			<view class="u-margin-top-20"  v-if="isCity && item.status!=2">
				<view class="box-title u-font-32 text-bold u-margin-bottom-26">城市速查</view>
				<item-box :padding="10" >
					<view class="u-padding-top-20 u-padding-bottom-20">
						<u-row>
							<u-col :span="4" v-for="(c,i) in productCities" :key="i">
								<view class="u-margin-bottom-10">
									<item-btn height="64" type="plain" width="100%">{{c.cityName}}{{c.grantNumber}}/{{c.totalNumber}}</item-btn>
								</view>
							</u-col>
						</u-row>
					</view>
				</item-box>
			</view>
		</view>
		<u-popup v-model="avatarPopFlag" mode="center" border-radius="26" width="500" closeable>
			<view class="u-padding-40">
				<view class="u-flex ">
					<item-image :type="'1'" :img="showDetailItem.avatar" :size="100" />
					<view class="u-margin-left-20 ">
						<view class=" u-font-32 content-desc-item">{{showDetailItem.nickname}}</view>
						<view class=" u-font-22 content-desc-item u-font-28 u-margin-top-10">
							<text >信用分：</text>
							<text>{{showDetailItem.creditScore}}</text>
						</view>
					</view>
				</view>
				<view class="history-list u-flex u-margin-top-20 u-text-center text-order-time u-font-26">
					<view class="history-item u-flex-1">
						已上{{showDetailItem.inCarCount}}车</view>
					<view class="history-item u-flex-1">
						已跳{{showDetailItem.jumpCarCount}}车</view>
					<view class="u-flex-1">
						已评测{{showDetailItem.evaluationCount}}本</view>
				</view>
				<view class=" u-margin-top-30 content-desc-item u-flex u-margin-bottom-20"
					@click="copyWxId(showDetailItem.wxId)">
					<u-icon name="weixin-fill" size="35" color="#765CFE"></u-icon>
					<text class="u-margin-left-20">{{showDetailItem.wxId || '暂无'}}</text>
				</view>
				<view class="content-desc-item u-flex" @click="callPhone(showDetailItem.phone)">
					<u-icon name="dianhua" size="35" custom-prefix="custom-icon" color="#765CFE"></u-icon>
					<text class="u-margin-left-20">{{showDetailItem.phone}}</text>
				</view>
				<view class="content-desc-item u-margin-top-30">
					所在城市：{{showDetailItem.cityPath | cityPathFormat}}
				</view>
				<view class="" v-if="item.status==0">
					<!-- <u-button shape="circle" :custom-style="customStyle" hover-class="none">
						<text class="text-white u-font-28">请Ta下车</text>
					</u-button> -->
					<item-btn @click="kickOutCarPeople" width="300" height="88">请Ta下车</item-btn>
				</view>
			</view>
		</u-popup>
		<model v-model="modelFlag" :zoom="false" :show-title="false" :show-cancel-button="!['rejectFlag','cancelCarFlag'].includes(modelType)" :show-confirm-button="modelType!='confirmCar'"  cancel-color="#333333" :confirm-color="currentThemeObj.primary" :content="closeModalTips" @confirm="confirmClose" @cancel="clearTime"/>
	</view>
</template>

<script>
	import listItem from "@/components/list-item/list-item.vue"
	import {getDetail,customRequest,add} from '@/api/crud.js'
	import {mapGetters} from 'vuex'
	import dayjs from 'dayjs'
	import carManager from '@/mixins/carManager.js'
	import larpDetail from '@/mixins/larpDetailMixins.js'
	import model from '@/components/u-modal/u-modal.vue'
	import price from '@/components/price/price.vue'
	import indexHeader from '@/components/indexHeader/indexHeader.vue'
	import {pxToRpx} from '@/utils'
	export default {
		mixins:[carManager,larpDetail],
		components:{
			listItem,model,price,indexHeader
		},
		data() {
			return {
				apiModule:'shopApi',
				item:{
					loading:true
				},
				avatarPopFlag:false,
				customStyle:{
					marginTop: '44rpx',
					marginBottom: '44rpx',
					backgroundColor:'#765CFE',
					borderColor:'none'
				},
				goon:{
					backgroundColor:'#765CFE',
					borderColor:'none'
				},
				colHeight:0,
				option:{},
				apiType:"driveCar",
				showDetailItem:{
					cityPath:''
				},
				offsetTop: 0,
				isCanClick:true,
				productCities:[],
				contentHeight:0
			};
		},
		computed:{
			...mapGetters(['loginForm']),
			isFull(){
				return this.userSmallDtos.length!==this.item.people
			},
			isTimeout(){
				return dayjs(this.item.enrollTime).unix()-dayjs().unix()>0
			},
			totalTime(){
				const {completeTime,executeTime} = this.item
				const diffTime = dayjs(completeTime).unix() -  dayjs(executeTime).unix() 
				return this.formatTime(diffTime)
			}
		},
		onPageScroll(e) {
			this.offsetTop = e.scrollTop
		},
		onLoad(option) {
			this.option = option;
			if(this.loginForm.userType!=='issue'){ //如果不是发行则直接跳转页面
				this.$u.route({
					url:'/pagesA/goOnLarp/detail',
					params:option,
					type:"redirectTo"
				})
			}
		},
		async onShow() {
			await this.getDetail()
			this.$nextTick(()=>{
				this.$u.getRect('#slot-content').then(res=>{
					const height = pxToRpx(res.height) + 60;
					this.contentHeight = height;
				})
			})
			if(this.isCity){
				getDetail({productId:this.item.productId}, 'product', this.apiModule, 'getCitys').then(data => {
					this.productCities = data;
				})
			}
		},
		methods:{
			addZero(time) {
				return time < 10 ? '0' + time : time;
			},
			formatTime(seconds) {
				// 小于等于0的话，结束倒计时
				let [day, hour, minute, second] = [0, 0, 0, 0];
				const hourNumber = 60 * 60;
				day = Math.floor(seconds / (hourNumber * 24));
				// 判断是否显示“天”参数，如果不显示，将天部分的值，加入到小时中
				// hour为给后面计算秒和分等用的(基于显示天的前提下计算)
				hour = Math.floor(seconds / hourNumber) - day * 24;
				// showHour为需要显示的小时
				let showHour = Math.floor(seconds / hourNumber);
				minute = Math.floor(seconds / 60) - hour * 60 - day * 24 * 60;
				second = Math.floor(seconds) - day * 24 * hourNumber - hour * hourNumber - minute * 60;
				// 如果小于10，在前面补上一个"0"
				showHour = this.addZero(showHour);
				minute = this.addZero(minute);
				second = this.addZero(second);
				return [showHour, minute, second].join(':')
			},
			getDetail(){
				return getDetail({id:this.option.id}, this.apiType, this.apiModule, 'thirdGet').then(data => {
					this.item = data
					this.item.categoryDescription = data.categoryDescription.split(',').splice(0,6)
					this.$u.mpShare = {
						title: data.name,
						imageUrl:data.image
					}
				})
			},
			getAvatarDetail(item){
				// 如果该车位是锁住的  并且还没发车  就解锁
				// 如果该车位是锁住的  并且已经发了车了  啥也不干
				// 如果该车位不是锁住的  才点击是展示用户信息
				if(item.userType=='lock'){
					if(this.item.status===0){
						this.lockPeopleFn(item)
					}
				}else{
						this.avatarPopFlag = true;
						this.showDetailItem = item;
				}
			},
			startCar(){
				add(this.loginForm.uid+'',this.apiType,this.apiModule,'startCar/'+this.item.id).then(res=>{
					this.$u.toast('发车成功');
					this.$u.route({
						url:'/pagesA/carTime/carTime',
						type:"redirectTo",
						params:{
							id:this.item.id
						}
					})
				})
			},
			cancelCarcallback(res){
				if(this.item.id===res.driveCarId){
					this.modelType = 'cancelCarFlag'
					this.modelFlag = true;
					this.closeModalTips = '该车已被取消'
				}
			},
			//拨打电话
			callPhone(phoneNumber){
				if(!phoneNumber) return false;
				uni.makePhoneCall({phoneNumber});
			},
			//微信号
			copyWxId(wxId){
				if(!wxId) return false;
				uni.setClipboardData({
					data: wxId,
					success:()=>{
						this.$u.toast('复制成功')
					}
				});
			},
			//锁定车位
			lockCarPeople(gender){
				//gender  （男：M,女：F）
				if(this.loginForm.userType=='issue'&& this.isCanClick){
					this.isCanClick = false;
					add(gender,this.apiType,this.apiModule,'lockPeople/'+this.item.id).then(res=>{
						this.$u.toast('锁定成功');
						this.getDetail();
					}).finally(res=>{
						this.isCanClick = true;
					})
				}
			},
			//锁车
			lockCar(){
				const lock = this.item.isLocked ?'unLockCar':'lockCar'
				add('',this.apiType,this.apiModule,`${lock}/${this.item.id}`).then(res=>{
					this.item.isLocked = lock == 'lockCar' //锁车
					this.$u.toast(this.item.isLocked ? '车门已焊死' : '车门已解锁');
					//this.getDetail()
				})
			},
			//踢人
			kickOutCarPeople(){
				uni.showModal({
					title:'温馨提示',
					content:'确认要请Ta下车么？',
					confirmText:"确认",
					success: ({confirm}) => {
						if(confirm){
							add('',this.apiType,this.apiModule,'kickOut/'+this.showDetailItem.id).then(res=>{
								this.$u.toast('踢人成功');
								this.avatarPopFlag = false;
								this.showDetailItem = {};
							})
						}
					}
				})
			},
			//解锁车位
			lockPeopleFn(item){
				if(this.loginForm.userType=='issue' && this.isCanClick){
					this.isCanClick = false;
					add('',this.apiType,this.apiModule,'unLockPeople/'+item.id).then(res=>{
						this.$u.toast('解锁成功');
						this.getDetail();
					}).finally(res=>{
						this.isCanClick = true;
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header-box-border {
		background-color: var(--background-color);
		height: 25rpx;
		bottom: 0;
		left: 0;
		right: 0;
		border-radius: 40rpx 40rpx 0 0;
		z-index: 23;
	}
	
	.username-text {
		color: var(--background-second-color);
	}
	
	.header-container {
		height: 100%;
	
		&::after {
			content: '';
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			background-color: rgba($color: #000000, $alpha: 0.7);
			z-index: 21;
		}
	
		.header-content {
			z-index: 22;
		}
	}
	
	.person-count-container {
		height: 100rpx;
	}
	
	.padding-env {
		padding-bottom: calc(env(safe-area-inset-bottom) + 50px)
	}
	.avatar {
		width: 124rpx;
		height: 124rpx;
		border-radius: 50%;
		background-color: var(--background-second-color);
		margin: 24rpx 0 36rpx;
	}
	.right-avatar {
		top: 8%;
		right: -3%;
		width: 30rpx;
		height: 30rpx;
		text-align: center;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1rpx solid white;
	}
	.woman-class {
		color: var(--theme-second-color);
	}
	.padding-env{
		padding-bottom: calc(env(safe-area-inset-bottom) + 50px)
	}
	.content{
		flex-direction: column;
		align-items: normal;
		height: 100rpx;
	}
	.history-item{
		border-right: 1px solid #9B9CC0;
	}
	.lockNum{
		width: 60px;
		border-bottom: 1rpx solid #dedede;
	}
	// .cur-name{
	// 	line-height: 50rpx;
	// }
</style>
